<template>
  <div>
    <h1>【aty-slider】 component demo</h1>
    <p>【aty-slider】 本质</p>
    <aty-row class="fd-slider-box">
      <aty-row>
        <aty-title level="4">1.【aty-slider】 基础</aty-title>
        <aty-slider v-model="value1" label="人生重启" required />
        {{value1}}
        <aty-slider :value="value2" range />
        <aty-slider :value="value3" disabled />
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-slider】 离散值</aty-title>
        <aty-slider :value="value4" :step="10" />
        <aty-slider :value="value5" :step="10" range />
        <aty-slider :value="value5" :step="10" range required label="一厘米有多长" />
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-slider】 显示间断点</aty-title>
        <aty-slider :value="value6" :step="10" show-stops />
        <aty-slider :value="value7" :step="10" range show-stops label="人生重启" />
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-slider】带有输入框</aty-title>
        <aty-slider :value="value8" name="value8" show-input @change="change" @input="input" :minNumber="-10" :maxNumber="120"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-slider】带label</aty-title>
        <aty-slider
          :value="value9"
          name="value9"
          show-input
          @change="change"
          @input="input"
          label="人生岁数大全"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="value9"
          :min="50"
        />
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-slider】 marks属性</aty-title>
        <aty-slider v-model="value10" range :marks="marks"></aty-slider>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 25,
      value2: [25, 90],
      value3: 20,
      value4: 20,
      value5: [45, 90],
      value6: 40,
      value7: [20, 40],
      value8: 30,
      value9: 60,
      value10: [25, 65],
      marks: {
        0: "0°C",
        12: "12°C",
        32: "32°C",
        55: {
          style: {
            color: "#ff0000"
          },
          label: this.$createElement("strong", "55°C")
        }
      }
    };
  },
  methods: {
    change(value, name) {
      console.log("change");
      console.log(value, name);
    },
    input(value, name) {
      console.log("input");
      console.log(value, name);
    }
  },
  mounted() {
    // setTimeout(() => {
    //   this.value9 = 20
    //   this.value1 = 20
    // }, 3000)
  }
};
</script>
<style  lang="less" type="text/less"  scoped>
.fd-slider-box {
  padding: 0 100px;
  text-align: left;
}
</style>
